<template>
	<view class="big-box flex-col align-center">
		<top-navigation :isFix='true' :isShow="true" bgColor='#CC1D1D' backIconColor='#FFF'>
		</top-navigation>
		<u-toast ref="uToast"></u-toast>
		<view class="nav-bg">
			<view class="success-tip">
				{{place==1?'请核对下单信息':getCarOrderStatus.label}}
			</view>
			<view class="success-time">
				<text v-if="getCarOrderStatus.value==3">{{orderInfo.create_at}} 下单</text>
				<!-- <text v-if="getCarOrderStatus.value==0 || getCarOrderStatus.value==3  ">{{orderInfo.pay_time}} 下单</text> -->
				<text v-if="getCarOrderStatus.value==2">{{orderInfo.cancel_at}} 取消</text>
			</view>
			<image class="success-icon" src="/static/images/car/success-icon.png" mode=""></image>
		</view>
		<view class="">
			<view class="order-info">
				<view class=" justify-start align-center" style="height: 90rpx;">
					<view class="order-title-one">
						<view class="order-tag ">
							订单编号
						</view>
					</view>
					<view class="">
						{{orderInfo.order_num}}
					</view>
				</view>
				<view class="info-sty justify-start align-center">
					<view class="order-title">
						订单金额
					</view>
					<view class="order-content">
						{{orderInfo.price_total}} 元
					</view>
				</view>

			</view>
			<view class="user-info">
				<view class="user-title ">
					<view class="user-tits">
						预定信息
					</view>
					<view class="line">

					</view>
				</view>
				<view class="user-sty justify-start align-center border-tnone">
					<view class="user-tit">
						服务类型
					</view>
					<view class="tab-sex justify-between">
						<!-- <view class="tab-item center" @tap="gender=index" v-for="(item,index) in genderList"
							:style="{background:index==gender?'':'#B9B9B9'}">
							{{item.label}}
						</view> -->
						{{contentInfo.serve}}
					</view>
				</view>
				<view class="user-sty justify-start align-center border-t-b">
					<view class="user-tit">
						航班号
					</view>
					<view class="user-con">
						{{contentInfo.flight_num}}
					</view>
				</view>
				<view class="user-sty justify-start align-center">
					<view class="user-tit">
						用车时间
					</view>
					<view class="user-con">
						{{contentInfo.usage_time}}

					</view>
				</view>
				<view class="user-sty justify-start align-center">
					<view class="user-tit">
						接机人数
					</view>
					<view class="user-con">
						{{contentInfo.people_num}}人

					</view>
				</view>
				<view class="user-sty justify-start align-center">
					<view class="user-tit">
						起始地点
					</view>
					<view class="user-con">
						{{(getArriveType==0 || getArriveType==2) ?contentInfo.star_site: contentInfo.end_site}}
					</view>
				</view>
				<view class="user-sty justify-start align-center ">
					<view class="user-tit">
						目标地点
					</view>
					<view class="user-con ">
						{{(getArriveType==0 || getArriveType==2) ?contentInfo.end_site: contentInfo.star_site}}
					</view>
				</view>
				<view class="user-sty justify-start align-center">
					<view class="user-tit">
						车型
					</view>
					<view class="user-con">
						{{contentInfo.vehicle_model}}

					</view>
				</view>
			</view>
			<view class="user-info">
				<view class="user-title ">
					<view class="user-tits">
						用户信息
					</view>
					<view class="line">

					</view>
				</view>
				<view class="user-sty justify-start align-center border-tnone">
					<view class="user-tit">
						姓名
					</view>
					<view class="tab-sex justify-between">
						<!-- <view class="tab-item center" @tap="gender=index" v-for="(item,index) in genderList"
							:style="{background:index==gender?'':'#B9B9B9'}">
							{{item.label}}
						</view> -->
						{{contentInfo.user_name}}
					</view>
				</view>
				<view class="user-sty justify-start align-center border-t-b">
					<view class="user-tit">
						手机号
					</view>
					<view class="user-con">
						{{contentInfo.user_phone}}
					</view>
				</view>
			</view>

		</view>
		<!-- <view class="go-pay center">
			立即支付
		</view> -->
		<bottom-btn @onClick='onClick'>立即支付</bottom-btn>
		<!-- <bottom-nav @pay='foodPay' :money="0"></bottom-nav> -->
		<payModal :accountInfo='accountInfo' v-if="payShow" :isShow='payShow' @pay='pay' @close='payShow=false'>
		</payModal>
	</view>
</template>

<script>
	import payModal from "../modal/payModal.vue"
	import {
		mapActions
	} from 'vuex'
	import {
		arriveType,carOrderStatus
	
	} from '@/utils/constants.js'
	// import {

	// } from '@/utils/constants.js'
	export default {
		components: {
			payModal
		},
		data() {
			return {
				payShow: false,
				gender: 0,
				genderList: [{
						val: 0,
						label: '先生'
					},
					{
						val: 1,
						label: '女士'
					},
				],
				orderInfo: {},
				contentInfo: {
					split_type:'接机'
				},
				order_id: 429,
				date: '',
				accountInfo: {},
				place:''



			}

		},
		computed: {
			//获取订单状态
			getCarOrderStatus(){
				return carOrderStatus.find(item=>item.value == this.orderInfo.state)
			},
			//获取服务类型
			getArriveType() {
				return arriveType.find(item=>item.name == this.contentInfo.split_type).ind
			},
			calculateStatusBar() {
				return `${this.statusHeight}px`;
			},
			tabsHeight() {
				return `calc(354rpx + (${this.deviceModel?parseInt(this.statusHeight)/2+'rpx':'0rpx'}))`;
			},

		},
		onLoad(o) {
			if (o.order_id) {
				this.order_id = o.order_id
			}
				this.place = o.place || ''
			this.orderDetail()
			this.date = this.$moment().format('YYYY-MM-DD hh-mm')
		},
		onShow() {

		},
		methods: {
			...mapActions(['getOrderDetail', 'getBeforeDetailSome', 'getPayOrder']),
			async orderDetail() {
				let res = await this.getOrderDetail({
					id: this.order_id
				})
				this.orderInfo = res.info
				this.contentInfo = res.content
				console.log('订单详情', res);
			},
			async onClick() {
				this.payShow = true
				let res = await this.getBeforeDetailSome({
					id: this.order_id
				})
				this.accountInfo = res || {}
			},
			// 支付
			async pay(type) {
				let _this = this
				wx.login({
					async success(res) {
						if (res.code) {
							//发起网络请求
							let orderData = await _this.getPayOrder({
								order_id: _this.order_id,
								pay_type: type,
								code: res.code
							})
							let payData = orderData.payInfo
							if (type == 1) {
								uni.requestPayment({
									provider: 'wxpay', //支付服务商
									timeStamp: payData.timeStamp,
									nonceStr: payData.nonceStr,
									package: payData.package,
									signType: payData.signType,
									paySign: payData.paySign,
									success: res => {
										console.log(res);
										_this.$navto('/car/order/pay-status?order_id='+orderData.order_id,false,1)
									},
									fail: res => {
										// _this.payFailed(payData.orderno)
										// this.flag = false;
										if (res.errMsg == 'requestPayment:fail cancel') {
											
											uni.$toast('您已取消支付')
										} else {
											uni.showModal({
												content: '支付失败,失败原因: ' + res.errMsg,
												showCancel: false
											});
										}
										// setTimeout(() => {
										// 	this.$util.redirectTo('/pages/pay/result/result', {
										// 		code: this.payInfo.out_trade_no
										// 	}, 'redirectTo');
										// }, 1000);
									}
								});
							}else if(type==0){
								_this.$navto('/car/order/pay-status?order_id='+orderData.order_id,false,1)
							}
							// this.$navto('/car/order/order-detail?order_id=' + resq.order_id)
						} else {
							uni.$toast('下单失败,请重试')
						}
					}
				})

			},
			foodPay() {
				this.$navto('/car/order/order-status')
			}
		},
	}
</script>
<style>
	@import '/common/css/common.css';
</style>
<style lang="scss" scoped>
	.big-box {
		width: 100vw;
		padding: 0 0 179rpx 0;
		min-height: 100vh;
		background: rgba(243, 243, 243, 0.95);

		.user-info {
			margin-bottom: 25rpx;
			padding: 32rpx 30rpx 0;
			width: 670rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(108, 108, 108, 0.1);
			border-radius: 20rpx 20rpx 20rpx 20rpx;

			.line {
				position: absolute;
				bottom: -2rpx;
				left: 50%;
				transform: translate(-50%, 0);
				width: 189rpx;
				height: 6rpx;
				background: linear-gradient(180deg, #FFFFFF 3%, #F2DCBE 24%, #CF9952 91%);
				border-radius: 0rpx 10rpx 0rpx 10rpx;
			}


			.border-t-b {
				border-top: 1rpx solid rgba(0, 0, 0, 0.1);
				// border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
			}

			.border-tnone {
				border-top: none;
				// border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
			}

			.user-sty {
				height: 90rpx;
				@extend .border-t-b;

				.user-tit {
					width: 112rpx;
					margin-right: 72rpx;
					font-family: Source Han Sans SC, Source Han Sans SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #8E8E8E;
				}

				.tab-sex {

					.tab-item {
						font-family: Source Han Sans SC, Source Han Sans SC;
						font-weight: 500;
						font-size: 30rpx;
						color: #FFFFFF;
						flex: 1;

					}
				}

				.user-con {
					width: 100%;
					flex: 1;
					font-family: Source Han Sans SC, Source Han Sans SC;
					font-weight: 400;
					font-size: 28rpx;
				}
			}
		}



		.go-pay {
			position: fixed;
			z-index: 12;
			bottom: constant(safe-area-inset-bottom);
			bottom: env(safe-area-inset-bottom);
			width: 670rpx;
			height: 90rpx;
			background: #CC1D1D;
			border-radius: 10rpx 10rpx 10rpx 10rpx;
			font-family: Source Han Sans SC, Source Han Sans SC;
			font-weight: 400;
			font-size: 36rpx;
			color: #FFFFFF;
		}

		.nav-bg {
			padding: 60rpx 40rpx;
			width: 750rpx;
			height: 304rpx;
			background: #CC1D1D;
			border-radius: 0rpx 0rpx 60rpx 60rpx;
			position: relative;

			.success-icon {
				bottom: 33rpx;
				position: absolute;
				right: 40rpx;
				width: 195rpx;
				height: 195rpx;
			}

			.success-tip {
				width: 420rpx;
				height: 61rpx;
				font-weight: bold;
				font-size: 42rpx;
				color: #FFFFFF;
			}

			.success-time {
				margin-top: 15rpx;
				font-weight: 400;
				font-size: 28rpx;
				color: #FFFFFF;
			}
		}

		.order-info {
			position: relative;
			margin: -90rpx 0 25rpx;
			width: 670rpx;
			// height: 541rpx;
			padding: 0 33rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(108, 108, 108, 0.1);
			border-radius: 20rpx 20rpx 20rpx 20rpx;

			.order-title-one {
				width: 112rpx;
				margin-right: 72rpx;

				.order-tag {
					font-family: Source Han Sans SC, Source Han Sans SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #8E8E8E;
				}
			}

			.info-sty {
				height: 90rpx;
				border-top: 1rpx solid rgba(0, 0, 0, 0.1);
			}

			.order-title {
				width: 112rpx;
				margin-right: 72rpx;
				font-family: Source Han Sans SC, Source Han Sans SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #8E8E8E;
			}

			.order-content {
				font-family: Source Han Sans SC, Source Han Sans SC;
				font-weight: 400;
				font-size: 32rpx;
				color: #000000;
			}
		}

		.user-title {
			margin-bottom: 9rpx;
			width: max-content;
			position: relative;
			font-family: Source Han Sans SC, Source Han Sans SC;
			font-weight: 400;
			font-size: 36rpx;
			color: #000000;
			z-index: 1;

			.line {
				position: absolute;
				bottom: -2rpx;
				left: 50%;
				transform: translate(-50%, 0);
				width: 147rpx;
				height: 6rpx;
				background: linear-gradient(180deg, #FFFFFF 3%, #F2DCBE 24%, #CF9952 91%);
				border-radius: 0rpx 10rpx 0rpx 10rpx;
			}

			.user-tits {
				position: relative;
				z-index: 2;
			}


		}
	}
</style>